.operation {
  color: #fff;
  position: absolute;
  z-index: 9;

  .iconfont {
    font-size: 70rpx;
    margin-bottom: 10rpx;
  }

  .left {
    position: fixed;
    left: 24rpx;
    top: 70vh;

    .sing-name {
      margin-bottom: 20rpx;
      font-size: 36rpx;
      background: #000;
      padding: 8rpx 30rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      max-width: 60vw;
      overflow: hidden;
      font-size: 30rpx;
      font-weight: 600;
    }

    .owner-name {
      background: #000;
      padding: 8rpx 30rpx;
      width: fit-content;
      color: #666;
      font-weight: 100;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      max-width: 60vw;
      overflow: hidden;
      font-size: 28rpx;
    }

    .recommend {
      border: 2rpx #f1f1f1 solid;
      border-radius: 30rpx;
      padding: 8rpx 20rpx 8rpx 30rpx;
      width: fit-content;
      margin: 24rpx 0;
      font-size: 24rpx;
    }
  }

  .right {
    position: fixed;
    right: 30rpx;
    top: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      // background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin-bottom: 40rpx;
      border: 4rpx #fff solid;
      border-radius: 50%;

      .avatar-item {
        width: 90rpx;
        height: 90rpx;
        ;
      }
    }

    .collection-activity {
      background: radial-gradient(#ff8e8e, red);
      -webkit-background-clip: text;
      color: transparent;
      animation: animationCollection .7s forwards;
    }

    @keyframes animationCollection {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.3);
      }

      100% {
        transform: scale(1);
      }
    }
  }


  .slider {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    height: 50rpx;
    width: 100vw;

    .custom-button {
      padding: 4rpx;
      background: #000;
    }
  }

}

.container {
  width: 100%;
  height: 100%
}

.video-swiper {
  width: 100%;
  height: 100%
}

.video_item {
  height: 100%;
  width: 100%
}

.play-pause {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9;
  margin-top: -72rpx;
  margin-left: -45rpx;
}

.iconfont {
  font-size: 90rpx;
}

.bofang {
  animation: bofang 1s forwards;
}

@keyframes bofang {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.progress-bar {
  position: absolute;
  width: 100vw;
  height: 2px;
  background: #000000;
  bottom: 0rpx;
}

.progress,
.preview-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #d4ffef;
}

.buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #999999;
}